<template>
  <view class="p-h24">
    <view class="main-view m-t40 p-h24 p-b24">
      <view class="card flex">
        <text class="flex-1 text-700-130">公司名称：</text>
        <input
          v-model="formState.title"
          class="flex-1 text-700-130 text-r"
          type="text"
          placeholder="请填写"
          placeholder-class="text-400-430" />
      </view>
      <view class="card flex">
        <text class="flex-1 text-700-130">职位：</text>
        <input
          v-model="formState.position"
          class="flex-1 text-700-130 text-r"
          type="text"
          placeholder="请填写"
          placeholder-class="text-400-430" />
      </view>
      <view class="card flex" @click="openDatePicker('start', formState.enrol_time)">
        <text class="flex-1 text-700-130">入职时间：</text>
        <text v-if="formState.enrol_time" class="text-700-130">{{ formState.enrol_time }}</text>
        <text v-else class="text-400-430">请选择</text>
        <image class="square-36 m-l10" src="@/static/images/public/arrow-3.png" />
      </view>
      <view class="card flex" @click="openDatePicker('end', formState.end_time)">
        <text class="flex-1 text-700-130">离职时间：</text>
        <text v-if="formState.end_time" class="text-700-130">{{ formState.end_time }}</text>
        <text v-else class="text-400-430">请选择</text>
        <image class="square-36 m-l10" src="@/static/images/public/arrow-3.png" />
      </view>

      <view class="label text-700-130">工作内容</view>
      <textarea v-model="formState.content" class="textarea" placeholder="请填写"></textarea>
    </view>

    <view class="flex-c">
      <RcButton
        :width="340"
        :top="100"
        text="确认"
        @click="onSubmit" />
    </view>

    <up-datetime-picker
      v-model="selectedDate"
      :show="showDatePicker"
      :minDate="new Date('1990-01-01').getTime()"
      :maxDate="Date.now()"
      mode="date"
      @confirm="onDatePickerConfirm"
      @cancel="closeDatePicker" />
  </view>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import RcButton from '@/components/button.vue'
  import type { TResumeJob } from '@/types/api.d'
  import { useJobDatePicker } from './useJobDatePicker'
  import { timeFormat } from '@/utils/utils'

  let jobId: number | null = null

  const isUpdate = ref(false)

  const formState = reactive({
    title: '',
    position: '',
    content: '',
    enrol_time: '',
    end_time: '',
  })

  const {
    selected: selectedDate,
    isStartPicker,
    show: showDatePicker,
    open: openDatePicker,
    close: closeDatePicker,
  } = useJobDatePicker()

  const onDatePickerConfirm = () => {
    if (isStartPicker.value) {
      formState.enrol_time = timeFormat(selectedDate.value)
    } else {
      formState.end_time = timeFormat(selectedDate.value)
    }

    closeDatePicker()
  }

  // 重新加载上一个页面的数据
  const reloadPrePage = () => {
    const pages = getCurrentPages()
    const page = pages[pages.length - 2]
    page.$vm.$.exposed.getMyResume()
  }

  const onSubmit = () => {
    if (!validate()) return

    const url = isUpdate.value ? '/job/edit' : '/job/add'
    const data: Record<string, any> = { ...formState }
    if (isUpdate.value) {
      data.id = jobId
    }

    uni.$u.post(url, data).then((res) => {
      uni.showToast({ title: res.msg, icon: 'none' })

      if (res.code === 1) {
        reloadPrePage()
        uni.navigateBack()
      }
    })
  }

  const validate = () => {
    if (formState.title === '') {
      uni.showToast({
        title: '请填写公司名称',
        icon: 'none',
      })
      return false
    }
    if (formState.position === '') {
      uni.showToast({
        title: '请填写职位',
        icon: 'none',
      })
      return false
    }
    if (formState.enrol_time === '') {
      uni.showToast({
        title: '请选择入职年份',
        icon: 'none',
      })
      return false
    }
    if (formState.end_time === '') {
      uni.showToast({
        title: '请选择离职时间',
        icon: 'none',
      })
      return false
    }
    if (formState.content === '') {
      uni.showToast({
        title: '请填写工作内容',
        icon: 'none',
      })
      return false
    }

    return true
  }

  onLoad((e) => {
    isUpdate.value = e?.type === 'update'

    if (isUpdate.value) {
      uni.setNavigationBarTitle({ title: '编辑工作经历' })
      uni.getStorage({
        key: 'RESUME_JOB_RECORD',
        success: (res) => {
          const record = JSON.parse(res.data) as TResumeJob
          jobId = record.id
          formState.title = record.title
          formState.position = record.position
          formState.content = record.content
          formState.enrol_time = record.enrol_time
          formState.end_time = record.end_time
        },
      })
    } else {
      uni.setNavigationBarTitle({ title: '添加工作经历' })
    }
  })
</script>

<style lang="scss">
	page {
		background-color: $page-color-4;
	}
</style>

<style lang="scss" scoped>
	.main-view {
		border-radius: 10rpx;
		background-color: $bg-color-1;

		.label {
			line-height: 102rpx;
		}

		.textarea {
			width: 100%;
			height: 326rpx;
			padding: 16rpx;
			border-radius: 6rpx;
			border: 1rpx solid $border-color-4;
		}
	}

	.card {
		height: 102rpx;
		border-bottom: 1rpx solid $border-color-4;
	}
</style>
